<template>
  <div>
    <div
      class="ud-app-loader ud-component--header-v6--header udlite-header"
      data-module-id="common/udlite/desktop"
      data-module-args='{"isInstructorSignupEnabled":false,"isLoggedIn":false,"tryUFBPlacements":{"bar":"ufb_header","profile":"account-menu","mobile":"ufb_header"},"mobileAppLink":{"url":"/mobile/"},"searchPhrase":null}'
      data-module-priority="-10"
    >
      <div data-unique-id="339" style="display: none"></div>

      <div
        class="udlite-text-sm header--header--3sK1h header--flex-middle--2Xqjv"
        data-purpose="header"
      >
        <div class="skip-to-content-button--skip-to-content--1MoIi">
          <button
            type="button"
            class="udlite-btn udlite-btn-large udlite-btn-primary udlite-heading-md skip-to-content-button--skip-to-content-btn--3Uakj"
          >
            <span
              aria-hidden="true"
              class="skip-to-content-button--skip-to-content-shadow--eBW6V"
            ></span
            ><span style="margin: 0">跳转至目录</span>
          </button>
        </div>
        <a href="/" class="header--flex-middle--2Xqjv header--logo--bdAod"
          ><img
            src="../assets/static/picture/logo-coral.svg"
            alt="Udemy"
            width="110"
            height="32"
        /></a>
        <nav
          class="header--gap-button--3bIww popper--popper--19faV popper--popper-hover--4YJ5J"
        >
          <span class="udlite-text-sm header--dropdown-button-text--2jtIM"
            >类别</span
          >
        </nav>

        <div
          class="udlite-search-form-autocomplete header--search-bar--1_mS0 udlite-form-group"
        >
          <label
            class="udlite-sr-only udlite-form-label udlite-heading-sm"
            for="u339-search-form-autocomplete--3"
            >搜索任何内容</label
          >

          <input
            placeholder="搜索任何内容"
            name="q"
            autoComplete="off"
            value=""
            id="u339-search-form-autocomplete--3"
            class="udlite-text-input udlite-text-input-small udlite-text-sm udlite-search-form-autocomplete-input js-header-search-field"
          />
        </div>
        <div style="flex: 1"></div>
      </div>
    </div>

    <div
      class="ud-app-loader ud-component--ui-feedback--ui-feedback"
      data-module-id="common/udlite/desktop"
      data-module-args='{"uiMessages":[]}'
      data-module-priority="-10"
    ></div>
    <div class="main-content">
      <div class="ud-component--logged-out-home--billboard">
        <div data-unique-id="340" style="display: none"></div>
        <div data-purpose="billboard" class="billboard--billboard--3-fQr">
        </div>
      </div>
    </div>

        <div>
        <div>
        <!--表单区域--->
      <div >
      <van-cell-group >
      <van-tabs v-model="active">

      <van-tab title = '用户名登录'>
      <van-field v-model="username" label = '用户名' placeholder="请输入用户名"/>
      </van-tab>

      <van-tab title = '手机号登录'>
      <van-field v-model="username" label = '手机号' placeholder="请输入手机号"/>
      </van-tab>

      <van-tab title = '邮箱登录'>
      <van-field v-model="username" label = '邮箱' placeholder="请输入邮箱"/>
      </van-tab>

      </van-tabs>
      <van-field v-model="password" label = '密 码' placeholder="请输入密 码"/>

      <!--验证码-->
      <van-cell-group>
      <drag-verify :width = 'width' :height = 'height' :text = 'text' ref = 'Verify' >
     
      </drag-verify>
      </van-cell-group>

      <!--图片验证码-->
      <!--<van-cell-group>
        // <img :src = 'src' @click="changecode">
      </van-cell-group>-->

      <van-field v-model="code" lable = '验证码' placeholder="请输入验证码" class="img"></van-field>
      <van-button type="primary" @click="login">登录</van-button>
      <van-button type='info' @click="rets">重置</van-button>

      </van-cell-group>
      
      </div>



    <!--表单区域--->
</div>
        
        </div>


        
    <div>
        <van-cell-group>
            <van-uploader :after-read="afterRead"/>


        </van-cell-group>


        <van-cell-group>
    <!--    <van-image round width="10rem" heigh='10rem' src='http://127.0.0.1:8000/static/upload/adv01.jpg/'>  -->
        
        </van-cell-group>
    </div>

    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            username:'',
           password:'',
           active:0,
           width:320,
           height:42,
           text:'请您拖动滑块',
           code:'',
        //    src:'http://127.0.0.1:8000/mycode/'

        }
    },
    methods: {
        afterRead(){
            let data = new FormData();
            data.append('file',file.file);
            const axiosInstance = this.axios.create({withCredentials:false});
            axiosInstance({method:'POST',url:'http://127.0.0.1:8000/upload/',data:data}).then(res=>{
                console.log(res.data);
            })
        },
        // 变更验证码
        // changecode(){
        //         var num = Math.ceil(Math.random()*10);
        //         this.src = this.src + '?num' + num;
        // },
        login:function(){
            console.log(this.$refs.Verify.isPassing);
            if(this.$refs.Verify.isPassing){}
            if (this.username == ''){
                this.$toast('用户名不能为空');
                return false;
            this.axios.post('http://127.0.0.1:8000/login/',this.qs.stringify({
            'username':this.username,'password':this.password,'active':this.active,'code':this.code
                })).then(res=>{
                console.log(res.data) 
                
                alert(res.data.msg)
                if(res.data.code == 200){
                    localStorage.setItem('username',this.username)
                    localStorage.setItem('token',res.data.token)
                    this.$router.push('head')
                }
            })
            
        }
        },
        rets(){
            this.username = '',
            this.password = ''
        },
        
    },

    created() {

    }
}
</script>

<style scoped>
img{
    cursor: pointer;
}
</style>
